iT邦幫忙

0

6.Bootstrap(中文教程)網格系统:排序與偏移

  • 分享至 

  • xImage
  •  

一.排序first與last

<div class="container" id="demo">
  <div class="row">
    <div class="col order-last"><span>1</span></div>
    <div class="col"><span>2</span></div>
    <div class="col order-first"><span>3</span></div>
    <div class="col"><span>4</span></div>
    <div class="col"><span>5</span></div>
  </div>
</div>


#demo.container,
#demo.container-fluid{
  background: #054bd1;/*藍*/
  height: 100vh;
  color: white;
}

#demo.container .row{
  background: #021d51;/*深藍*/
  boder-bottom: 1px solid #000;
  height: 30vh;
}

#demo.container .row > div > span{
  display: block;
  background: #487bdd;/*淺藍*/
  color: white;
  font-size: 32px;
  padding: 8px;
  border: 1px solid #021d51;/*深藍*/
}

重點:
1.order-first的屬性為-1
2.order-last的屬性為order:13
3.以順序來排列,這是很快速的方式

二.排序使用編號

<div class="row">
    <div class="col order-3"><span>1</span></div>
    <div class="col order-1"><span>2</span></div>
    <div class="col order-2"><span>3</span></div>
</div



#demo.container,
#demo.container-fluid{
  background: #054bd1;/*藍*/
  height: 100vh;
  color: white;
}

#demo.container .row{
  background: #021d51;/*深藍*/
  boder-bottom: 1px solid #000;
  height: 30vh;
}

#demo.container .row > div > span{
  display: block;
  background: #487bdd;/*淺藍*/
  color: white;
  font-size: 32px;
  padding: 8px;
  border: 1px solid #021d51;/*深藍*/
}

重點:
1.屬性同上
2.可以設定 order 在不同斷點上 (e.g., .order-1.order-md-2),包含支援 1 ~ 12 及不同的中斷點。

codepen

一.偏移

<div class="container" id="demo">
  <div class="row">
    <div class="col offset-2"><span>1</span></div>
    <div class="col offset-1"><span>2</span></div>
  </div>
</div>

#demo.container,
#demo.container-fluid{
  background: #054bd1;/*藍*/
  height: 100vh;
  color: white;
}

#demo.container .row{
  background: #021d51;/*深藍*/
  boder-bottom: 1px solid #000;
  height: 30vh;
}

#demo.container .row > div > span{
  display: block;
  background: #487bdd;/*淺藍*/
  color: white;
  font-size: 32px;
  padding: 8px;
  border: 1px solid #021d51;/*深藍*/
}

重點:
1.offset-2為偏移兩格,在CSS的屬性為外流白左邊16.666667%
2.offset-1為偏移兩一格,在CSS的屬性為外流白左邊8.333333%
3.offset的特性主要是往右靠

codepen
參考:bootstrap4


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言